<script setup lang="ts">
import CustomNavbar from '@/pages/index/components/CustomNavbar.vue'
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import type { XtxGuessInstance } from '@/types/component'
import PageSkeleton from './components/PageSkeleton.vue'
import { useGetGuessList } from '@/composables'
// 轮播图数据
const bannerList = ref<BannerItem[]>([])
const activeIndex = ref<number>(0)
const getHomeBanner = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result.sort((a, b) => Number(a.id) - Number(b.id)) // 按id升序排序，确保指示点顺序正确，因为接口返回的数据顺序是随机的，导致指示点顺序错乱
}

// 分类面板数据
const categoryList = ref<CategoryItem[]>([])
const getHomeCategory = async () => {
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}

// 热门推荐
const hotList = ref<HotItem[]>([])
const getHomeHot = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
}

// 猜你喜欢-滚动加载更多
const { guessRef, onScrolltolower } = useGetGuessList()

// 下拉刷新
const isTriggered = ref(false)
const onPullRefresh = async () => {
  isTriggered.value = true
  guessRef.value?.resetParams() // 发请求前，重置猜你喜欢参数

  // 知识点【promise】：使用Promise.all实现多个接口同时发送请求，提升性能。如果使用await单独修饰每一个请求，那么下一个请求必须等待前一个请求发送完毕，影响性能
  // Promise.all()方法参数可以是promise对象，也可以是普通值，普通值当作作成功的promise处理 (注意all方法需要await修饰)
  await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot(), guessRef.value?.getMore()])
  isTriggered.value = false
}

// 骨架屏展示控制
const isLoading = ref(true)

onLoad(async () => {
  await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot()])

  isLoading.value = false
})
</script>

<template>
  <view class="page-container">
    <!-- 自定义导航栏 (知识点:这里的导航栏无需设置position: fixed固定头部,因为它与下面的滚动容器是隔离的,滚动容器滚动的时候只是内部滚动,不会影响导航栏的位置) -->
    <CustomNavbar />

    <!-- 知识点【页面布局】：导航栏需要固定，只需把要滚动的元素放到scroll-view里面 -->
    <scroll-view
      refresher-enabled
      :refresher-triggered="isTriggered"
      @refresherrefresh="onPullRefresh"
      scroll-y
      @scrolltolower="onScrolltolower"
      class="scroll-view"
    >
      <!-- 骨架屏 -->
      <PageSkeleton v-if="isLoading" />
      <!--知识点： 使用 template标签对元素进行分组，它没有任何元素展示的意义，适合用来分组-->
      <template v-else>
        <!-- 轮播图 -->
        <XtxSwiper :list="bannerList" />
        <!-- 分类面板 -->
        <CategoryPanel :list="categoryList" />
        <!-- 热门推荐 -->
        <HotPanel :list="hotList" />
        <!-- 猜你喜欢 -->
        <XtxGuess ref="guessRef" />
      </template>
    </scroll-view>
  </view>
</template>

<style lang="scss">
// todo 弄明白为什么给page-container设置而不是page
page {
  background-color: #f7f7f7;
  //知识点【页面布局】： scroll-view需要设置一个固定高度，因为不同手机屏幕的尺寸不同，设置为100%
  height: 100%;

  // 为了避免app端页面滚动后导航栏消失.新的写法是给page-container标签设置样式,而不是给page标签设置样式
  .page-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .scroll-view {
    // 知识点：头部固定，下面滚动区域占满剩余空间。所以设置flex：1，如果不这样写，会出现底部部分内容看不到的情况
    flex: 1;
    overflow: hidden;
  }
}
</style>
